# HTML DOM Canvas Object

« Previous
Next Reference »

## Canvas Object

The Canvas Object is new in HTML5.

The HTML5 <canvas> tag is used to draw graphics, on the fly, with JavaScript.

### Access a Canvas Object

You can access a <canvas> element by using getElementById():

var x = document.getElementById("myCanvas"); Try it

### Create a Canvas Object

You can create a <canvas> element by using the document.createElement() method:

var x = document.createElement("CANVAS"); Try it

Note: The <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas.

## Colors, Styles, and Shadows

Property | Description
--- | ---
fillStyle | Sets or returns the color, gradient, or pattern used to fill the drawing
strokeStyle | Sets or returns the color, gradient, or pattern used for strokes
shadowColor | Sets or returns the color to use for shadows
shadowBlur | Sets or returns the blur level for shadows
shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape

Method | Description
--- | ---
createLinearGradient() | Creates a linear gradient (to use on canvas content)
createPattern() | Repeats a specified element in the specified direction
createRadialGradient() | Creates a radial/circular gradient (to use on canvas content)
addColorStop() | Specifies the colors and stop positions in a gradient object

## Line Styles

Property | Description
--- | ---
lineCap | Sets or returns the style of the end caps for a line
lineJoin | Sets or returns the type of corner created, when two lines meet
lineWidth | Sets or returns the current line width
miterLimit | Sets or returns the maximum miter length

## Rectangles

Method | Description
--- | ---
rect() | Creates a rectangle
fillRect() | Draws a "filled" rectangle
strokeRect() | Draws a rectangle (no fill)
clearRect() | Clears the specified pixels within a given rectangle

## Paths

Method | Description
--- | ---
fill() | Fills the current drawing (path)
stroke() | Actually draws the path you have defined
beginPath() | Begins a path, or resets the current path
moveTo() | Moves the path to the specified point in the canvas, without creating a line
closePath() | Creates a path from the current point back to the starting point
lineTo() | Adds a new point and creates a line from that point to the last specified point in the canvas
clip() | Clips a region of any shape and size from the original canvas
quadraticCurveTo() | Creates a quadratic Bézier curve
bezierCurveTo() | Creates a cubic Bézier curve
arc() | Creates an arc/curve (used to create circles, or parts of circles)
arcTo() | Creates an arc/curve between two tangents
isPointInPath() | Returns true if the specified point is in the current path, otherwise false

## Transformations

Method | Description
--- | ---
scale() | Scales the current drawing bigger or smaller
rotate() | Rotates the current drawing
translate() | Remaps the (0,0) position on the canvas
transform() | Replaces the current transformation matrix for the drawing
setTransform() | Resets the current transform to the identity matrix. Then runs transform()

## Text

Property | Description
--- | ---
font | Sets or returns the current font properties for text content
textAlign | Sets or returns the current alignment for text content
textBaseline | Sets or returns the current text baseline used when drawing text

Method | Description
--- | ---
fillText() | Draws "filled" text on the canvas
strokeText() | Draws text on the canvas (no fill)
measureText() | Returns an object that contains the width of the specified text

## Image Drawing

Method | Description
--- | ---
drawImage() | Draws an image, canvas, or video onto the canvas

## Pixel Manipulation

Property | Description
--- | ---
width | Returns the width of an ImageData object
height | Returns the height of an ImageData object
data | Returns an object that contains image data of a specified ImageData object

Method | Description
--- | ---
createImageData() | Creates a new, blank ImageData object
getImageData() | Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
putImageData() | Puts the image data (from a specified ImageData object) back onto the canvas

## Compositing

Property | Description
--- | ---
globalAlpha | Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation | Sets or returns how a new image are drawn onto an existing image

## Other

Method | Description
--- | ---
save() | Saves the state of the current context
restore() | Returns previously saved path state and attributes
createEvent() |
getContext() |
toDataURL() |

## Standard Properties and Events

The canvas object also supports the standard properties and events.

## Related Pages

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag

« Previous
Next Reference »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples